☁️ Nx Cloud Report

CI is running/has finished running commands for commit d85cddc. As they complete they will appear below. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this CI Pipeline Execution

Sent with 💌 from NxCloud.

@hirbod could you help me re-vamp the React Native docs page if we ship this?

Codecov Report

Attention: Patch coverage is 87.50000% with 1 line in your changes missing coverage. Please review.

Project coverage is 84.21%. Comparing base (4521a04) to head (d85cddc).
Report is 3 commits behind head on main.

@@             Coverage Diff             @@
##             main    #8348       +/-   ##
===========================================
+ Coverage   46.21%   84.21%   +37.99%     
===========================================
  Files         198       26      -172     
  Lines        7509      361     -7148     
  Branches     1710      101     -1609     
===========================================
- Hits         3470      304     -3166     
+ Misses       3664       48     -3616     
+ Partials      375        9      -366     

@TkDodo Sure. How should we proceed? Should we keep what we have, replace it, or additionally add the new solution?
While we're at it, we should also add a section for react query devtools in expo

I love that plugin

Yeah there are some mentions about devtools on the top of the page, as well as on the devtools page: https://tanstack.com/query/v5/docs/framework/react/devtools

I think what I would want is:

• the devtools page mentions that devtools exist as 3rd party integrations for RN, and it should link to the react native guide: https://tanstack.com/query/v5/docs/framework/react/react-native
• the react native guide should have a Devtools section, listing all the options

Regarding the sections, I think we should do:

• Devtools
• Online status management
• Refetch on app focus
• The new thing :)

The new thing should cover what you can do with subscribe, maybe show the standard example with react-navigation, maybe show a more advanced example with the react-native stack (e.g. keep the top two screen subscribed)

I don’t think we need these anymore:

• Refresh on Screen focus
• Disable re-renders on our of focus Screens
• Disable queries on out of focus screens

if we can cover everything with the subscribed flag

Open in Stackblitz

npm i https://pkg.pr.new/@tanstack/angular-query-devtools-experimental@8348

npm i https://pkg.pr.new/@tanstack/angular-query-experimental@8348

npm i https://pkg.pr.new/@tanstack/query-async-storage-persister@8348

npm i https://pkg.pr.new/@tanstack/query-broadcast-client-experimental@8348

npm i https://pkg.pr.new/@tanstack/eslint-plugin-query@8348

npm i https://pkg.pr.new/@tanstack/query-core@8348

npm i https://pkg.pr.new/@tanstack/query-devtools@8348

npm i https://pkg.pr.new/@tanstack/query-persist-client-core@8348

npm i https://pkg.pr.new/@tanstack/query-sync-storage-persister@8348

npm i https://pkg.pr.new/@tanstack/react-query@8348

npm i https://pkg.pr.new/@tanstack/react-query-next-experimental@8348

npm i https://pkg.pr.new/@tanstack/react-query-devtools@8348

npm i https://pkg.pr.new/@tanstack/react-query-persist-client@8348

npm i https://pkg.pr.new/@tanstack/solid-query@8348

npm i https://pkg.pr.new/@tanstack/solid-query-devtools@8348

npm i https://pkg.pr.new/@tanstack/solid-query-persist-client@8348

npm i https://pkg.pr.new/@tanstack/svelte-query@8348

npm i https://pkg.pr.new/@tanstack/svelte-query-devtools@8348

npm i https://pkg.pr.new/@tanstack/svelte-query-persist-client@8348

npm i https://pkg.pr.new/@tanstack/vue-query@8348

npm i https://pkg.pr.new/@tanstack/vue-query-devtools@8348

commit: d85cddc

Yes, so far I can't think of a scenario that wouldn't work with the new subscribed prop.
One question remains though, what prop needs to be set to disable it:
refetchOnWindowFocus or refetchOnMount?

There’s a new prop: subscribed: boolean. You can set that to false to detach the observer from the component.

so:

const subscribed = useShouldBeSubscribed()

useQuery({
  queryKey,
  queryFn,
  subscribed
})

where useShouldBeSubscribed needs to figure out if it’s the top screen or not, in a reactive way (which is something that I was hoping you could fill in for me because I don’t know how that’s done)

Well, basically, subscribed should use the result of useIsFocused.
This hook is reactive and automatically updates when a screen is focused or blurred.

If we want to keep both the second and the topmost subscribed, we’d need to use a mix of useNavigationState and useIsFocused.

Untested, something like this:

const isTopScreen = useNavigationState((state) => {
    const currentRouteKey = route.key;
    const topRouteKey = state.routes[state.routes.length - 1].key;
    return currentRouteKey === topRouteKey;
});

const isSecondScreen = useNavigationState((state) => {
    if (state.routes.length > 1) {
        const secondRouteKey = state.routes[state.routes.length - 2].key;
        return route.key === secondRouteKey;
    }
    return false;
});

IMO, it's overkill. Since focus should ideally trigger a refetchOnWindowFocus, a disabled subscription would be re-enabled the moment useIsFocused changes again, which I believe is sufficient.

Great to see that the experience with focused screens in React Native is improving.
Just one thing: while the subscribe flag seems like a good solution, it will need to be set to true or false during navigation. This will trigger a re-render on navigation, which is not recommended for smooth, high-quality transitions.

Would an imperative function do the job instead?

Currently, I’m doing something like this, but I’m encountering issues with the isStale() function retuning false while it's actualy stale.

export const useEnabledOnFocus = (enabled = true): ((query: Query) => boolean) => {
  const isFocused = useRef(false);
  const query = useRef<Query<unknown, Error, unknown, QueryKey>>();
  useFocusEffect(
    React.useCallback(() => {
      isFocused.current = true;
      const task = InteractionManager.runAfterInteractions(() => {
        if (
          enabled &&
          ((query.current?.state.status === "pending" &&
            query.current?.state.fetchStatus === "idle") ||
            query.current?.isStale())
        ) {
          query.current?.fetch();
        }
      });

      return () => {
        isFocused.current = false;
        task.cancel();
      };
    }, [])
  );

  return (_query: Query<unknown, Error, unknown, QueryKey>) => {
    query.current = _query;
    const computedEnabled = enabled && isFocused.current;
    return computedEnabled;
  };
};

Usage:

useQuery({
    ...,
    enabled: useEnabledOnFocus()
})

FYI, runAfterInteractions does not fire in native-stack, only in the JS stack. And since the native-stack is the recommended way, re-renders are not a concern, as the navigation runs on the UI thread.

Ok, thanks for the explanation ! Can't wait to try the new api
Edit: Bottom Tab Navigator is not native

@hirbod did you have some time to try out the preview build?

@TkDodo will do this weekend. The week was very tough with our release and hotfixes :D

@flodlc There’s one with nearly 100% feature parity and React Navigation adapters (also works with Expo Router): https://github.com/okwasniewski/react-native-bottom-tabs.

Either way, bottom tabs simply switch screens without animation, so there’s no such thing as jank with them.

@TkDodo finally have so time, pulling now and testing

@TkDodo Also, check Discord, but FYI: I gave it a thorough test—it works perfectly fine. LGTM!

Actually I was thinking about the react navigation implementation that allows "shift" animation.
Not sure if it really impacts the animation though